<template>
  <div id="data-view">
    <dv-full-screen-container>

      <top-header-v3 />

      <div class="datav-main-container">
        <div class="mc-top">

          <div class="top-left-cmp"  >
          <TopLeftTable/>

          </div>

          <div class="top-middle-cmp"  >
            <TopMiddleTable/>
          </div>

          <div class="top-right-cmp"  >
            <TopRightTable/>
          </div>


        </div>

        <div class="mc-bottom">

          <div class="bottom-left-container"  >

            <BottomLeftCmp/>

          </div>



          <div class="bottom-right-container"  >
            <BottomRightCmp/>
          </div>

        </div>

      </div>



    </dv-full-screen-container>
  </div>
</template>

<script>
  import BottomLeftCmp  from './BottomLeftCmp'
  import BottomRightCmp  from './BottomRightCmp'
  import topHeaderV3 from './topHeaderV3'
  import TopLeftTable from './TopLeftTable'
  import TopMiddleTable from './TopMiddleTable'
  import TopRightTable from './TopRightTable'

  export default {
    name: 'DataView',
    components: {
      topHeaderV3,
      TopLeftTable,
      TopMiddleTable,
      TopRightTable,
      BottomLeftCmp,
      BottomRightCmp
    },
    data () {
      return {}
    },
    methods:{
      goIndex(){
        this.$router.push({path: '/index'});
      }
    }
  }
</script>

<style lang="less" scoped>
  #data-view {
    width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;

    #dv-full-screen-container {
      background-image: url("../../../assets/images/pageBg.png");
      background-color: #030409;
      background-size: 100% 100%;
      box-shadow: 0 0 3px blue;
      display: flex;
      flex-direction: column;
    }



    .datav-main-container {

      height: calc(~"100% - 80px");

      .mc-top, .mc-bottom {
        box-sizing: border-box;
        padding: 20px;
        display: flex;
      }

      .mc-top {
        height: 60%;
      }

      .mc-bottom {
        height: 40%;
      }

      .top-left-cmp {
        padding: 10px;
        width: 33%;
      }
      .top-middle-cmp {
        padding: 10px;
        width: 33%;
      }
      .top-right-cmp {
        padding: 10px;
        width: 33%;
      }

      .bottom-left-container {
        padding: 10px;
        width: 100%;
      }


      .bottom-right-container {
        padding: 10px;
        width: 100%;

      }
    }
  }
</style>
